<meta charset="UTF-8">

<script>
    //当网页加载结束后执行脚本
    window.onload = function(){
        //获取所有的li标签的数组，并起名为lis
     var lis = document.getElementsByTagName("li");

     //对于这些li标签来说
     for(var i=0;i<lis.length;i++){
         //如果鼠标位于某一个li上面时触发下面函数
         lis[i].onmouseover = function(){
             //this 是 事件触发者
             //将这个li的样式中背景色变为红色
             this.style.background = "darkblue";
             this.style.color = "white";
         };

         //如果鼠标离开了某一个li上面时触发下面函数
         lis[i].onmouseout = function(){
             //this 是 事件触发者
             //将这个li的样式中背景色变为红色
             this.style.background = "";
             this.style.color = "";
         };
     }
    };
</script>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>